<template>
    <div id="lineChartZs" style="width: 100%; height: 100%; position: relative; z-index: 9;"></div>
</template>
<script>
import * as echarts from "echarts";
let timer = null;
export default {
    name: 'PerformanceTrend',
    data() {
        return {
            xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            yAxisData: [150, 230, 224, 218, 135, 147, 260],
            flag: true
        }
    },
    mounted() {
        this.initChart();
        timer = setInterval(() => {
            if (this.flag) {
                this.yAxisData = [230, 224, 218, 135, 147, 260, 150];
                this.flag = false;
            } else {
                this.yAxisData = [150, 230, 224, 218, 135, 147, 260]
                this.flag = true;
            }
            this.initChart();
        }, 3000);
    },
    beforeDestroy() {
        clearInterval(timer);
    },
    methods: {
        initChart() {
            let dom = document.getElementById('lineChartZs');
            let chart = echarts.init(dom, 'chalk')
            let option = {
                title: {
                    text: '2024年项目走势',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    top: '12%',
                    left: '5%',
                    right: '8%',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.xAxisData,
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                },
                series: [
                    {
                        name: '共享量',
                        type: 'line',
                        data: this.yAxisData,
                        smooth: true,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    color: '#fff'
                                }
                            }
                        }
                    }
                ]
            };
            chart.setOption(option)
            // 监听屏幕变化自动缩放图表
            let observer = new ResizeObserver(function () {
                chart.resize();
            });
            observer.observe(dom)
        }
    }
}
</script>
